<!-- 个人中心 -->
<template>
  <view class="components-theme">

    <!-- 弹窗确认 -->
    <view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
      <view class="cu-dialog" style="padding: 300rpx 0 70rpx;">
        <view class="modal_bg"></view>
        <view class="modal_main">
          <view class='nav-list margin-top'>
            <view :class="'nav-li bg-zt' + (index + 1)" v-for="(item, index) in inter" :key="index"
              @click="switchImage(index, item.name)">
              <view class="nav-name">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 顶部背景 -->
    <view class='UCenter-bg'
      :style="'background-image: url(' + pic[topBackGroupImageIndex].link + ');margin-top:' + CustomBar + 'px;'">
      <view class='space' v-show="spaceShow">
        <view class="stars ">
          <view class="star "></view>
          <view class="star pink "></view>
          <view class="star blue "></view>
          <view class="star yellow "></view>
        </view>
      </view>

      <block>
        <view class='text-center'>
          <view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg open-data" style="overflow: hidden;"  @click="logOutHandle">
            <text class="icon iconfont icon-yonghushouquanguanli" style="font-size: 80rpx;"></text>
          </view>
          <view class="padding text-white text-xl text-bold"  @click="logOutHandle">
            你好，{{ userInfo.userName }}！
          </view>
          <view class="change-box"  @click="changeDrug">
            <view>{{ roleName }}</view>
            <view class="icon iconfont icon-qiehuan" style="padding-left: 20rpx;color: #00BFA5;"></view>
          </view>
        </view>
      </block>
      <image
        src='https://cdn.nlark.com/yuque/0/2019/gif/280373/1570670848649-assets/web-upload/3dbaa72a-062b-470f-9b9d-058ff8f85ab8.gif'
        mode='scaleToFill' class='gif-wave'></image>
    </view>

    <block>
      <view class='padding flex text-center text-grey bg-white shadow-warp-my'>
        <view class='flex flex-sub flex-direction solid-right' @click="linkTo('thisDayAmount')">
          <view class="text-xxl text-orange" style="color: #00BFA5;font-weight: 600;">{{ thisDayAmount }}</view>
          <view class="margin-top-sm" style="color: #00BFA5;font-weight: 400;">
            <text class='cuIcon-hot'></text> 本日销量
          </view>
        </view>
        <view class='flex flex-sub flex-direction solid-right' @click="linkTo('thisMountAmount')">
          <view class="text-xxl text-orange" style="color: #00BFA5;font-weight: 600;">{{ thisMountAmount }}</view>
          <view class="margin-top-sm" style="color: #00BFA5;font-weight: 400;">
            <text class='cuIcon-hot'></text> 本月销量
          </view>
        </view>
        <view class='flex flex-sub flex-direction solid-right'  @click="linkTo('lastMountAmount')">
          <view class="text-xxl text-blue" style="color: #00B8D4;font-weight: 600;">{{ lastMountAmount }}</view>
          <view class="margin-top-sm" style="color: #00B8D4;font-weight: 600;">
            <text class='cuIcon-share'></text> 上月销量
          </view>
        </view>
      </view>


      <view class="cu-list menu card-menu margin-top-lg shadow-shop bg-white text-black my-radius sm-border"  v-if=" roleName !== '伏美替尼' ">
        <view class="cu-item">
          <button class='content cu-btn' open-type="share">
            <text class="icon iconfont icon-benyue" style="color: #0091EA90;font-size: 40rpx;"></text>
            <text class='text-lg margin-sm'>本月患者</text>
          </button>
          <view class="action" style="color: #0091EA; font-weight: 600;font-size: 36rpx;">
            {{ thisMonthPatientAmount }}
          </view>
        </view>
        <view class="cu-item">
          <button class='content cu-btn' open-type="share">
            <text class="icon iconfont icon-customer_add" style="color: #00BFA590;font-size: 40rpx;"></text>
            <text class='text-lg margin-sm'>新增患者</text>
          </button>
          <view class="action" style="color: #00BFA5; font-weight: 600;font-size: 36rpx;">
            {{ newPatientAmount }}
          </view>
        </view>
        <view class="cu-item">
          <button class='content cu-btn' open-type="share">
            <text class="icon iconfont icon-shiqulianjie" style="color: #F4433690;font-size: 40rpx;"></text>
            <text class='text-lg margin-sm'>脱落患者</text>
          </button>
          <view class="action" style="color: #F44336; font-weight: 600;font-size: 36rpx;">
            {{ tuoLuoPatientAmount }}
          </view>
        </view>
      
      </view>

      <!-- 综合销量 -->
      <view class="comprehensive">
        <view class="title">综合销量</view>
        <view>
          <uni-datetime-picker
            :value="range"
            type="daterange"
            :clearIcon="false"
            @change='dateChange'
          />
        </view>
        <view style="margin-top: 4px;display:flex;">
          <u--input
            style="border: 1px solid #e5e5e5;background: #fff; flex: 1;"
            placeholder="医生姓名"
            prefixIconStyle="font-size: 22px;color: #909399"
            :clearable="true"
            v-model="doctorName"
          >
          </u--input>
          <u-button type="primary" text="检索" style="width: 60px;margin-left: 10px" @click="getList"></u-button>
        </view>
        <ua-table
          v-if="page.total >= 1"
          :columns="column"
          :data="data"
          :stripe="true"
          :border="true"
          :headerBold="true"
          headerBgColor="#f3f6f9"
          headerColor="#333"
          height="340px"
          style="border:1px solid #eee"
        >
        </ua-table>
        <view class="page-box" v-if="page.total > 0">
          <page-pagination style="display: flex;" v-if="page.total > 0" class="test-pagination" :numAround="true" :total="page.total" layout="page,prev,next,limit,total"
            :pageSizes="[20,50,100,500]" :pageSize="page.limit" @sizeChange="sizeChange" @change="pageChange" color="#09f">
          </page-pagination>
        </view>
        <view v-if="page.total === 0" class="noData">
          <view class="icon iconfont icon-zanwushuju1"></view>
          暂无数据
        </view>
      </view>

    </block>

    <view style="height: 110rpx;width: 1rpx;"></view>
    <u-picker :show="changeShow" :columns="rolesOptions" keyName='drugName' @confirm='confirmChange' @cancel='cancelChange' confirmColor='#00BFA5'></u-picker>
    <!-- 登出 start -->
    <view>
      <u-popup :show="loginOutShow" mode='center'>
        <view class="logOutBox">
          <view>请确认是否登出？</view>
          <view class="btn-box">
            <u-button @click="loginOutShow = false" style="margin-right: 20rpx;">取消</u-button>
            <u-button color='#00BFA5' type="primary" @click="handleLogOut" style="margin-left: 20rpx;">确定</u-button>
          </view>
        </view>
      </u-popup>
    </view>
    <!-- 登出 end -->
		<quick-message ref="message"></quick-message>
  </view>
</template>

<script>
import mRequest from "@/api/index";
import hccmStore from '@/common/hccm-store'
import moment from "moment";
var videoAd = null
export default {
  data () {
    return {
      roleId: hccmStore.getRole()[0].id,
      roleName: hccmStore.getRole()[0].drugName,
      doctorName: '',
      changeShow: false,
      loginOutShow: false,
      thisDayAmount: '加载中',
      thisMountAmount: '加载中',
      lastMountAmount: '加载中',
      thisMonthPatientAmount: '加载中',
      newPatientAmount: '加载中',
      tuoLuoPatientAmount: '加载中',
      userInfo: hccmStore.getUser(),
      rolesOptions: [
        hccmStore.getRole(),
      ],
      range: ["2024-10-01", "2024-10-20"],
      column:[
        { type:'index', align: 'center', fixed:false,width:100 },
        { prop: 'kdrq', label: '建档时间', align: 'center', fixed:false, width:220,},
        { prop: 'hospName', label: '医院', align: 'center', width: 410},
        { prop: 'drugName', label: '品名', width:360, align: 'center'},
        { prop: 'spec', label: '规格', width:410, align: 'center'},
        { prop: 'amount', label: '数量', width:140, align: 'center'},
        { prop: 'doctorName', label: '医生姓名', width:160, align: 'center'},
        { prop: 'patientName', label: '患者姓名', width:160, align: 'center'},
        { prop: 'mobile', label: '手机号', width:180, align: 'center'},
      ],
      data:[],
      page:{
        limit: 20,
        page: 1,
        total: 0
      },
      changeColumns: [
        [{
          label: '雪月夜',
          // 其他属性值
          id: 2021
        }, {
          label: '冷夜雨',
          id: 804
        }]
      ],
      // Custom: this.Custom,
      CustomBar: this.CustomBar,
      spaceShow: true,
      modalName: null,
      picName: '流星之夜',
      pic: [{
        link: 'https://cdn.zhoukaiwen.com/zjx_me_bg1.jpeg',
        name: '春天'
      }, {
        link: 'https://cdn.zhoukaiwen.com/zjx_me_bg2.jpeg',
        name: '夏天'
      }, {
        link: 'https://cdn.zhoukaiwen.com/zjx_me_bg3.jpeg',
        name: '秋天'
      }, {
        link: 'https://cdn.zhoukaiwen.com/zjx_me_bg4.jpeg',
        name: '冬天'
      }, {
        link: 'https://cdn.zhoukaiwen.com/zjx_me_bg5.jpeg',
        name: '幽静'
      }, {
        link: 'https://cdn.zhoukaiwen.com/zjx_me_bg6.jpg',
        name: '天空'
      }],
      topBackGroupImageIndex: 5,
      inter: [{
        title: 'mimicry',
        name: '活力春天',
        color: ''
      }, {
        title: 'theme',
        name: '清爽夏日',
        color: ''
      }, {
        title: 'theme',
        name: '金秋之韵',
        color: ''
      }, {
        title: 'theme',
        name: '冬日之阳',
        color: ''
      }, {
        title: 'theme',
        name: '幽兰星空',
        color: ''
      }, {
        title: 'theme',
        name: '流星之夜',
        color: ''
      }]
    }
  },

  watch: {
    topBackGroupImageIndex (val) {
      console.log(val)
      if (val == 4 || val == 5) {
        this.spaceShow = true
      } else {
        this.spaceShow = false
      }
    }
  },
  onPullDownRefresh() {
    this.salesThisDayAmount()
    this.salesThisMountAmount()
    this.salesLastMountAmount()
    this.salesThisMonthPatientAmount()
    this.salesNewPatientAmount()
    this.salesTuoLuoPatientAmount()
    this.range = [moment().startOf('month').format('YYYY-MM-DD'),moment(new Date()).format('YYYY-MM-DD')]
    this.getList()
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad(){
    this.salesThisDayAmount()
    this.salesThisMountAmount()
    this.salesLastMountAmount()
    this.salesThisMonthPatientAmount()
    this.salesNewPatientAmount()
    this.salesTuoLuoPatientAmount()
    this.range = [moment().startOf('month').format('YYYY-MM-DD'),moment(new Date()).format('YYYY-MM-DD')]
    this.getList()
    console.log('hccmStore.getUser()',hccmStore.getUser())
  },
  methods: {
    dateChange(val){
      console.log(val)
      this.range = val
      this.getList()
    },
    getList(){
      // 跳转到本日销量
      let params = {
        firstDay: this.range[0],
        lastDay: this.range[1],
        roleId: this.roleId,
        doctorName: this.doctorName,
        page: this.page.page,
        size:this.page.limit,
      }
      mRequest.salesListAll(params).then(res=>{
        this.data = res.page.data
        this.page.total = res.page.total
      })
    },
    sizeChange(val){
      this.page.limit = val
      this.page.page = 1
      this.data = []
      this.getList()
    },
    pageChange(val){
      this.page.page = val
      this.data = []
      this.getList()
    },
    // 跳转到本月销量
    linkTo(val){
      uni.navigateTo({
        url: `/pages/home-main/sale-list?flag=${val}&roleId=${this.roleId}`
      })
    },
    // 本日销量
    salesThisDayAmount(){
      this.thisDayAmount = '加载中'
      let params = {
        // firstDay: moment(new Date()).format('YYYY-MM-DD'),
        // lastDay: moment(new Date()).format('YYYY-MM-DD'),
        // page: 1,
        // size:1,
        roleId: this.roleId,
      }
      mRequest.salesThisDayAmount(params).then(res=>{
        this.thisDayAmount = res.thisDayAmount
      })
    },
    // 本月销售量
    salesThisMountAmount(){
      this.thisMountAmount = '加载中'
      let params = {
        roleId: this.roleId,
      }
      mRequest.salesThisMountAmount(params).then(res=>{
        this.thisMountAmount = res.thisMouthAmount
      })
    },
    // 上月销售量
    salesLastMountAmount(){
      this.lastMountAmount = '加载中'
      let params = {
        roleId: this.roleId,
      }
      mRequest.salesLastMountAmount(params).then(res=>{
        this.lastMountAmount = res.lastMouthAmount
      })
    },
    
    // 上月销售量
    salesThisMonthPatientAmount(){
      this.thisMonthPatientAmount = '加载中'
      let params = {
        roleId: this.roleId,
      }
      mRequest.salesThisMonthPatientAmount(params).then(res=>{
        this.thisMonthPatientAmount = res.thisMouthPatientAmount
      })
    },
    
    // 本月新增人数
    salesNewPatientAmount(){
      this.newPatientAmount = '加载中'
      let params = {
        roleId: this.roleId,
      }
      mRequest.salesNewPatientAmount(params).then(res=>{
        console.log(res)
        this.newPatientAmount = res.home.newEntities.length
      })
    },
    
    // 脱落患者
    salesTuoLuoPatientAmount(){
      this.tuoLuoPatientAmount = '加载中'
      let params = {
        roleId: this.roleId,
      }
      mRequest.salesTuoLuoPatientAmount(params).then(res=>{
        console.log(res)
        this.tuoLuoPatientAmount = res.home.tuoLuoPatientAmount
      })
    },
    
    // 登出 
    logOutHandle(){
      console.log(222)
      this.loginOutShow = true
    },
    handleLogOut(){
      uni.clearStorageSync()
      this.$refs.message.show({
        type:'success', //String 默认default
        msg:'登出成功', //String 显示内容 *
        direction:'top', //String 默认顶部显示
        icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
        mask:true, //Boolean 遮罩（默认false没有遮罩）
        time:1000, //Number|Boolean 默认3000/false为不自动关闭
        customStyle:{ //自定义样式
          // color:'#FFFFFF', //字体图标色
          // backgroundColor:'rgba(0,0,0,.5)', //背景色
          fontSize: 12,
        }, 
        iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
        iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
      })
      this.loginOutShow = false
      setTimeout(() => {
        uni.reLaunch({
					url: '/pages/home-main/login'
				})
      }, 1000)
    },
    changeDrug () {
      this.changeShow = true
    },
    confirmChange(val){
      this.changeShow = false
      console.log(val.value[0])
      this.roleName = val.value[0].drugName
      this.roleId = val.value[0].id
      this.salesThisMountAmount()
      this.salesLastMountAmount()
      this.salesThisMonthPatientAmount()
      this.salesNewPatientAmount()
      this.salesTuoLuoPatientAmount()
    },
    cancelChange(){
      this.changeShow = false
    },
    getGitee () {
      uni.setClipboardData({
        data: 'https://gitee.com/kevin_chou',
        success: function () {
          console.log('success')
        }
      })
    },
    switchImage (index, name) {
      this.topBackGroupImageIndex = index
      this.modalName = null
      this.picName = name
    },
    showModal (e) {
      this.modalName = e.currentTarget.dataset.target
    },
    showGitee (e) {
      this.modalName = e.currentTarget.dataset.target
    },
    hideModal (e) {
      this.modalName = null
    },
  }
}
</script>

<style lang="scss" scoped>
.change-box {
  height: 60rpx;
  min-width: 100rpx;
  margin: 20rpx 20rpx 0 0;
  background: #f5f5f550;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #fff;
  font-weight: 600;
}
/deep/.u-picker__view__column__item{
  height: 50px !important;
  line-height: 50px !important;
}
.uni-picker-view-content{
  height: 50px !important;
  line-height: 50px !important;
}
.uni-picker-view-indicator{
  height: 50px !important;
  line-height: 50px !important;
}
.logOutBox{
  width: 400rpx;
  padding: 60rpx 40rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .btn-box{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40rpx;
  }
}
/deep/.u-popup__content{
  border-radius: 20rpx !important;
  overflow: hidden !important;
}



.UCenter-bg {
  background: #fff;
  background-size: 100% 100%;
  /* background-size: cover; */
  height: 360rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;
  height: 100rpx;
}


// 头像
.cu-avatar2 {
  font-variant: small-caps;
  margin: 0;
  padding: 0;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
  border: 1px solid #fff;
  white-space: nowrap;
  position: relative;
  width: 150rpx;
  height: 150rpx;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  font-size: 1.5em;
  z-index: 99;
}

.name {
  text-shadow: 2px 2px 1px #2f9bfe;
}

.dialog2 {
  background: none;
}

.saicode {
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.img-big image {
  top: -40px;
  width: 280rpx;
  height: 280rpx;
}


.shadow-me {
  box-shadow: 0rpx 0rpx 100rpx 0rpx rgba(0, 0, 0, 0.1);
}

.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.35);
}

.my_logo {
  background: none;
  padding: 50rpx 0 30rpx 0;
}

.my-radius {
  border-radius: 12rpx;
  overflow: hidden
}

.my-icon image {
  width: 100rpx;
  height: 100rpx;
  display: inline-block;
  margin: 0 auto
}

.my-iconcolor {
  background: rgba(255, 255, 255, 0.96)
}

.shadow-shop {
  box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
}

.qrcode-img {
  position: fixed;
  width: 80rpx;
  height: 80rpx;
  bottom: 350rpx;
  right: 30rpx;
  z-index: 1024;
  opacity: 0.8;
  box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
  border: none
}


/* 数字背景 */
.shadow-warp-my {
  position: relative;
  box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
}

.shadow-warp-my:before,
.shadow-warp-my:after {
  position: absolute;
  content: "";
  top: 20rpx;
  bottom: 30rpx;
  left: 20rpx;
  width: 50%;
  box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
  transform: rotate(-6deg);
  z-index: -1;
}

.shadow-warp-my:after {
  right: 20rpx;
  left: auto;
  transform: rotate(6deg);
}


.bg-product {
  background-image: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
  color: #fff;
}

.margin-bottom-my {
  margin-bottom: 150rpx;
}

.giteeClass {
  margin-top: 30rpx;
  font-size: 34rpx;
  color: #2440B3;
  text-decoration: underline;
}

.cu-dialog {
  background: #FFFFFF;
  overflow: visible;
}

.modal_bg {
  width: 100%;
  height: 400rpx;
  position: absolute;
  top: -100rpx;
  background-image: url(https://zhoukaiwen.com/img/qdpz/modal_bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.modal_main {
  background-color: #FFFFFF;
}

/* 主题色 */
.bg-zt1 {
  color: #fff;
  background: #81d949;
}

.bg-zt2 {
  color: #fff;
  background: #b2e6ff;
}

.bg-zt3 {
  color: #fff;
  background: #f3cd41;
}

.bg-zt4 {
  color: #fff;
  background: #ddecf7;
}

.bg-zt5 {
  color: #fff;
  background: #152e9d;
}

.bg-zt6 {
  color: #fff;
  background: #0f1358;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 40upx 0px;
  justify-content: space-between;
}

.nav-li {
  padding: 22upx;
  border-radius: 12upx;
  width: 45%;
  margin: 0 2.5% 40upx;
  background-image: url(../../static/image/bg.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.nav-li::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10upx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-li.cur {
  color: #fff;
  background: rgb(94, 185, 94);
  box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
}

.nav-name {
  font-size: 28upx;
  text-transform: Capitalize;
  position: relative;
}

.nav-name::before {
  content: "";
  position: absolute;
  display: block;
  width: 40upx;
  height: 6upx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: "";
  position: absolute;
  display: block;
  width: 100upx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40upx;
  opacity: 0.3;
}

.nav-name::first-letter {
  font-weight: bold;
  font-size: 36upx;
  margin-right: 1px;
}

.nav-li text {
  position: absolute;
  right: 30upx;
  top: 30upx;
  font-size: 52upx;
  width: 60upx;
  height: 60upx;
  text-align: center;
  line-height: 60upx;
}

// 好玩动态
.dong {
  z-index: 9999;
  position: fixed;
  top: -40px;
  right: -80px;
  transform: scale(0.24);
  -webkit-transform: scale(0.24);
  -moz-transform: scale(0.24);

}

.monster {
  transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  /* IE 9 */
  -moz-transform: rotate(-50deg);
  /* Firefox */
  -webkit-transform: rotate(-50deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(-50deg);
  /* Opera */
  display: flex;
  justify-content: center;
  position: relative;
  width: 170px;
  height: 400px;
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
  background-color: #3C47D7;
  box-shadow: 20px 20px 60px #4650E5;
}

.monster__face {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 14%;
  width: 75%;
  height: 160px;
}

.monster__noses {
  top: 50%;
  display: flex;
  justify-content: space-between;
  width: 28%;
  height: auto;
  margin-bottom: 10px;
}

.monster__nose {
  width: 8px;
  height: 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}

.monster__mouth {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 0%;
  overflow: hidden;
  border: 25px solid #FFC333;
  border-radius: 100px;
  background-color: #810332;
  animation: mouth 1.75s infinite;
  box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.monster__mouth::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 80px;
  border-radius: 100px;
  background-color: #400018;
}

.monster__mouth::after {
  content: '';
  position: absolute;
  bottom: -80px;
  width: 160px;
  height: 80px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #DC1B50;
  animation: tongue 1.75s infinite;
}

.monster__top {
  position: absolute;
  top: -30px;
  width: 170px;
  height: 30px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #ffffff;
  z-index: 100;
  animation: t 1.75s infinite;
}

.monster__bottom {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #ffffff;
  z-index: 100;
  animation: b 1.75s infinite;
}


.avatar-eye {
  position: absolute;
  top: -10%;
  width: 65px;
  height: 65px;
  background: linear-gradient(105deg, white, #cb87f4);
  border-radius: 100%;
  box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
  margin: 3px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}


.avatar-eye--green {
  background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}

.avatar-eye--violet {
  background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}


.eye--left {
  left: 10%;
}

.eye--right {
  left: 85%;
}

.eye--center {
  left: 45%;
  top: 10%;
}

.avatar-eye-pupil {
  position: absolute;
  width: 55%;
  height: 55%;
  left: 50%;
  top: 25%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  z-index: 100;
  border-radius: 100%;
}


.pupil--green {
  background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}

.pupil--pink {
  background: linear-gradient(135deg, #f1a183, #8535cd);
}


.avatar-eye-pupil-blackThing {
  position: absolute;
  width: 55%;
  height: 55%;
  left: 50%;
  top: 25%;
  background: #2c2f32;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  border-radius: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.avatar-eye-pupil-lightReflection {
  position: absolute;
  width: 7px;
  height: 7px;
  left: 25%;
  top: 10%;
  background: #ebebeb;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  border-radius: 100%;
  box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}

/**/
@keyframes t {

  0%,
  10%,
  80%,
  100% {
    top: -30px;
  }

  20% {
    top: 0px;
  }

  30% {
    top: -20px;
  }

  40% {
    top: -0px;
  }

  50% {
    top: -25px;
  }

  70% {
    top: 0px;
  }
}

@keyframes b {

  0%,
  10%,
  80%,
  100% {
    bottom: -30px;
  }

  20% {
    bottom: 0px;
  }

  30% {
    bottom: -20px;
  }

  40% {
    bottom: -0px;
  }

  50% {
    bottom: -25px;
  }

  70% {
    bottom: 0px;
  }
}

@keyframes mouth {

  0%,
  10%,
  100% {
    width: 100%;
    height: 0%;
  }

  15% {
    width: 90%;
    height: 30%;
  }

  20% {
    width: 50%;
    height: 70%;
  }

  25% {
    width: 70%;
    height: 70%;
  }

  30% {
    width: 80%;
    height: 60%;
  }

  35% {
    width: 60%;
    height: 70%;
  }

  40% {
    width: 55%;
    height: 75%;
  }

  45% {
    width: 50%;
    height: 90%;
  }

  50% {
    width: 40%;
    height: 70%;
  }

  55% {
    width: 70%;
    height: 95%;
  }

  60% {
    width: 40%;
    height: 50%;
  }

  65% {
    width: 100%;
    height: 60%;
  }

  70% {
    width: 100%;
    height: 70%;
  }

  75% {
    width: 90%;
    height: 70%;
  }

  80% {
    width: 50%;
    height: 70%;
  }

  85% {
    width: 90%;
    height: 50%;
  }

  85% {
    width: 40%;
    height: 70%;
  }

  90% {
    width: 90%;
    height: 30%;
  }

  95% {
    width: 100%;
    height: 10%;
  }
}

@keyframes tongue {

  0%,
  20%,
  100% {
    bottom: -80px;
  }

  30%,
  90% {
    bottom: -40px;
  }

  40% {
    bottom: -45px;
  }

  50% {
    bottom: -50px;
  }

  70% {
    bottom: -80px;
  }

  90% {
    bottom: -40px;
  }
}


// 顶部流星
.space {
  position: absolute;
  top: 0;
  left: 0;
}

.planet {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -75rpx 0 0 -75rpx;
  overflow: hidden;
  z-index: 2;
}

.planet_shadow {
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  top: -40%;
  right: -10%;
  border: 35rpx solid rgba(0, 0, 0, .15);
}

.star {
  display: block;
  width: 5rpx;
  height: 5rpx;
  border-radius: 50%;
  background: #FFF;
  top: 100rpx;
  left: 400rpx;
  position: relative;
  transform-origin: 100% 0;
  animation: star-ani 6s infinite ease-out;
  box-shadow: 0 0 5rpx 5rpx rgba(255, 255, 255, .3);
  opacity: 0;
  z-index: 2;
}

.star:after {
  content: '';
  display: block;
  top: 0rpx;
  left: 4rpx;
  border: 0rpx solid #fff;
  border-width: 0rpx 90rpx 2rpx 90rpx;
  border-color: transparent transparent transparent rgba(255, 255, 255, .3);
  transform: rotate(-45deg) translate3d(1rpx, 3rpx, 0);
  box-shadow: 0 0 1rpx 0 rgba(255, 255, 255, .1);
  transform-origin: 0% 100%;
  animation: shooting-ani 3s infinite ease-out;
}

.pink {
  top: 30rpx;
  left: 395rpx;
  background: #ff5a99;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
}

.pink:after {
  border-color: transparent transparent transparent #ff5a99;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
}

.blue {
  top: 35rpx;
  left: 432rpx;
  background: cyan;
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
}

.blue:after {
  /* border-color: transpareanimation-delay: 12s; */
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  animation-delay: 7s;
}

.yellow {
  top: 50rpx;
  left: 600rpx;
  background: #ffcd5c;
  animation-delay: 5.8s;
}

.yellow:after {
  border-color: transparent transparent transparent #ffcd5c;
  animation-delay: 5.8s;
}

@keyframes star-ani {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 0, 0);
    -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
    -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
  }

  50% {
    opacity: 1;
    transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
    -webkit-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
    -moz-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
  }

  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
    -webkit-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
    -moz-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
  }
}

// 综合
.comprehensive{
  padding: 21px;
  .title{
    font-size: 18px;
    color: #2f9bfe;
    position: relative;
  }
  .title:before{
    content: '';
    height: 60%;
    width: 4px;
    background: #2f9bfe;
    border-radius: 4px;
    position: absolute;
    left: -10px;
    top: 18%;
  }
}
.page-box{
  height: 50px;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
/deep/.ua__thead-th{
  font-size: 16px !important;
  height: 40px;
  line-height: 40px;
}
/deep/.ua__tbody-td{
  font-size: 14px !important;
  height: 34px;
  line-height: 34px;
}
/deep/.ua__table .ua__table-thead{
  z-index: 11 !important;
}
.noData{
  height: 150px;
  width: 100%;
  background: #f5f5f5;
  color: #999;
  border-radius: 8px;
  // border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
  .icon{
    font-size: 60px;
    margin-bottom: 10px;
  }
}
</style>
